
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>图片上传</title>
    <style type="text/css" rel="stylesheet">
        .bar {
            height: 18px;
            background: #30cab2;
        }

        body {
            margin: 0;
        }

      
        .fileupload-wrapper {
            /*background-color: #30cab2;*/
            /*border-radius: 5px;*/
            position: relative;
            width: 100%;
            height: auto;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .fileupload-wrapper-content{
            overflow: auto;
        }
        .fileupload-wrapper h4.title {
            background: #30cab2;
            height: 60px;
            width: 100%;
            margin: 0 auto;
            line-height: 60px;
            color: #fff;
            padding-left: 25px;
            display: block;
            position: relative;
        }

        .fileupload-wrapper h4.title button.close-iframe {
            width: 30px;
            height: 30px;
            position: absolute;
            right: 40px;
            top: 20px;
            border: 0;
            cursor: pointer;
            background: url('__STATIC__/editPage/images/close-iframe.png') no-repeat;
        }

        .fileupload-wrapper .upload-wrapper {
            width: 90%;
            height: auto;
            overflow: hidden;
            line-height: 54px;
            margin: 15px auto;

        }

        .fileupload-wrapper .upload-wrapper .upload-btn {

            width: 150px;

            float: left;
            position: relative;
        }

        .fileupload-wrapper .upload-wrapper .upload-btn button {
            width: 100%;
            text-align: center;
            background: #f4f4f4;
            color: #3f3f3f;
            z-index: 888;
            font-weight: normal;
            height: 50px;
            line-height: 50px;
            border: 1px solid #d9d9d9;
        }

        .fileupload-wrapper .upload-wrapper .upload-btn input[type=file] {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            filter: alpha(opacity=0); /*IE滤镜，透明度50%*/
            -moz-opacity: 0; /*Firefox私有，透明度50%*/
            opacity: 0; /*其他，透明度50%*/
            z-index: 0;
        }

        .fileupload-wrapper .upload-wrapper .upload-tip {
            width: 350px;
            margin-left: 25px;
            float: left;
            color: #888888;
            font-size: 12px;
        }

        .fileupload-wrapper .text {
            position: absolute;
            right: 0;
            top: 0;
            color: #fff;
            font-size: 20px;
            line-height: 34px;
            width: 150px;
            text-align: center;
            display: block;
        }

        /*.fileupload-wrapper #fileupload{*/
        /*font-size: 100px;*/
        /*position: absolute;*/
        /*right: 0;*/
        /*top: 0;*/
        /*}*/
        #uploaded-image {
            width: 600px;
            height: auto;
            margin: 0px auto;

        }

        #uploaded-image img {
            width: 600px;
            border: 1px solid #ccc;
        }

        #progress {
            width: 90%;
            position: fixed;
            margin-left: -45%;
            margin-top: -5%;
            top: 50%;
            left: 50%;
            display: none;
        }

        form.crop-form {
            width: 90%;
            text-align: center;
            margin-top: 15px;
            display: none;
        }

        form.crop-form input[type=button] {
            width: 150px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
            margin: 0 15px;
            cursor: pointer;
        }

        form.crop-form input.cancle {
            background: #FFFFFF;
            border: 1px solid #1eb49b;
            color: #1eb49b;
        }

        form.crop-form input#submit {
            background: #1eb49b;
            color: #FFFFFF;
            border: 1px solid #7ce6da;
        }


    </style>
    <link media="all" type="text/css" rel="stylesheet" href="__STATIC__/editPage/bower_components/jcrop/css/jquery.Jcrop.min.css">

</head>
<body>
<div class="fileupload-wrapper">
    <h4 class="title">选择图片
        <button class="close-iframe"></button>
    </h4>
    <div class="fileupload-wrapper-content">
        <div class="upload-wrapper">
            <div class="upload-btn">
                <input id="fileupload" type="file" name="{$name}" data-url="{:url('uploadImg',array('name'=>$name))}" multiple>
                <button>选择图片</button>
            </div>
            <div class="upload-tip">
                请上传小于1M的jpg、png格式的图片,建议尺寸
                <eq name="name" value="slide">640*400</eq>
                <eq name="name" value="ads">640*280</eq>
                <eq name="name" value="logo">100*30</eq>
            </div>
        </div>
                <div id="progress">
            <div class="bar" style="width: 0%;"></div>
        </div>
        <div id="uploaded-image">

        </div>
        <form class="crop-form">
            <input type="hidden" id="file-name" name="file_name" value=""/>
            <input type="hidden" id="x" name="x" value=""/>
            <input type="hidden" id="y" name="y" value=""/>
            <input type="hidden" id="w" name="w" value=""/>
            <input type="hidden" id="h" name="h" value=""/>            
            <input type="button" class="cancle" value="取消"/>
            <input type="button" id="submit" value="提交"/>
        </form>
    </div>

</div>

<script src="__STATIC__/editPage/bower_components/jquery.min.js"></script>

<script src="__STATIC__/editPage/bower_components/jqueryUpload/jquery.ui.widget.js"></script>

<script src="__STATIC__/editPage/bower_components/jqueryUpload/jquery.iframe-transport.js"></script>

<script src="__STATIC__/editPage/bower_components/jqueryUpload/jquery.fileupload.js"></script>

<script src="__STATIC__/editPage/bower_components/jcrop/jquery.Jcrop.min.js"></script>

<script>
var _name = '{$name}';
    $(function () {

        $('#fileupload').fileupload({
            dataType: 'json',
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress').show().find('.bar').css(
                        'width',
                        progress + '%'
                ).text(progress + '%');
            },
            done: function (e, data) {
                var result = data.result
                if (result.status == 0) {
					if (_name == 'exttypeset' || _name == 'ads' || _name == 'extmenu'){
						window.parent.$.fancybox.close()
                        window.parent.McMore.uploadImageCallback(result)	
					}
//          $('#progress .bar, .fileupload-wrapper').fadeOut();  
                    $('#progress').fadeOut();
                    $('form.crop-form').show();
                    $('#file-name').val(result.url);
                    $('#uploaded-image').html('');
                    $('<img style="" src="' + result.url + '"/>').appendTo($('#uploaded-image')).Jcrop({
                        allowSelect: false,
                        minSize: 0,
						{eq name="name" value="slide"}            
							maxSize: [640, 400],
							aspectRatio: 16 / 10,
							setSelect: [0, 0, 320, 200],
						{/eq}	
						{eq name="name" value="ads"}       
							 maxSize: [640, 280],
							 aspectRatio: 16 / 7,
							 setSelect: [0, 0, 320, 140],
						{/eq}
						{eq name="name" value="logo"}       
							 maxSize: [640, 192],
							 aspectRatio: 16 / 4,
							 setSelect: [0, 0, 100, 30],
						{/eq}
                        onSelect: function (c) {
                            $('#x').val(c.x)
                            $('#y').val(c.y)
                            $('#w').val(c.w)
                            $('#h').val(c.h)
                        }
                    }, function () {
                        var c = this.tellSelect()
                        $('#x').val(c.x)
                        $('#y').val(c.y)
                        $('#w').val(c.w)
                        $('#h').val(c.h)
                        $('#submit').show()
                    });
                } else {
                    alert(result.msg)
                }
            }
        });

        $('#submit').click(function () {
            $.ajax({
                url: '{:url("resize",array("name"=>$name))}',
                data: $('.crop-form').serialize(),
                dataType: 'json',
                type: 'post',
                success: function (result) {
                    if (result.status == 0) {
                        window.parent.$.fancybox.close()
                        window.parent.McMore.uploadImageCallback(result)
                    } else {
                        alert(result.msg)
                    }

                }
            });
            return false;
        })

        $('.fileupload-wrapper h4.title button.close-iframe,.crop-form input.cancle').click(function () {
            window.parent.$.fancybox.close()
        })
    });
</script>
</body>
</html>